<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-image: url("style/img/14.jpg");
            background-size: 100%;
        }

        #div_form {
            width: 819px;
            height: 430px;
            border: 1px solid #007bff;
            background-size: 100%;
            position: absolute;
            left: 393px;
            top: 190px;
            border-radius: 30px;
            text-align: center;
        }

        .account_inp{
            height: 40px;
            border-left-width:0px;
            border-top-width:0px;
            border-right-width:0px;
            border-bottom-color:black;
            font-weight:bold;
            font-size: 17px;
            background: #f8f9fa;
            outline:none;
        /*  点击input后去掉蓝色边框  */
        }
        .inp_div{
            margin-bottom: 25px;
            margin-left: 70px;
        }
        #login_btn{
            background-image:-webkit-linear-gradient(left, #17a2b8,#abdde5);
            height: 43px;
            width: 227px;
            position: absolute;
            left: 69px;
            top: 317px;
            border-radius: 17px;
            cursor: pointer;
            color: #FBFBFB;
            font-size: 21px;
            font-family:SimHei;
            outline:none;
        }
        h2{
            margin-top: 23px;
            margin-bottom: 52px;
            margin-left: 64px;
            font-size: 30px;
            background-image:-webkit-linear-gradient(bottom,#17a2b8,#abdde5);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
        }

        #left_div{
            width: 435px;
            height: 430px;
            border-top-left-radius:30px;
            border-bottom-left-radius:30px;
            position: absolute;
            background-image: url("style/img/11.png");
            background-size: 100%;
        }
        #right_div{
            width: 384px;
            height: 430px;
            border-top-right-radius:30px;
            border-bottom-right-radius:30px;
            background: #f8f9fa;
            position: absolute;
            right: 0px;
        }
        #login_form{
            position: absolute;
            top:35px;
        }
        #inner_div{
            position: absolute;
            width: 54px;
            height: 430px;
            background: #f8f9fa;
            left: 414px;
        }
        h1{
            margin-left: 580px;
            margin-top: 110px;
            font-size: 40px;
            color: #f8f9fa;
        }

        /*        滑块验证       */
        #box{
            position: relative;
            width: 227px;
            height: 38px;
            left: 35px;
            bottom: -5px;
            margin: 0 auto;
            margin-top: 10px;
            background-color: #e8e8e8;
            box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
        }
        .bgColor{
            position: absolute;
            left:0;
            top:0;
            width:40px;
            height: 40px;
            background-color: #ed969e;
        }
        .txt{
            position: absolute;
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #000;
            text-align: center;
        }
        .slider{
            position: absolute;
            left:0;
            top:0;
            width: 50px;
            height: 38px;
            border: 1px solid #ccc;
            background: #fff;
            text-align: center;
            cursor: move;
        }
        .slider>i{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
        .slider.active>i{
            color:green;
        }
        .btn {
            position: absolute;
            width: 40px;
            height: 32px;
            background: #fff url() center no-repeat;
            background-size: 13px;//不设置这个属性，背景图片会不成比例的显示
        border: 1px solid #ccc;
            cursor: move;
        }
        .btns {
            position: absolute;
            width: 40px;
            height: 32px;
            background: #fff url() center no-repeat;
            background-size: 13px;//不设置这个属性，背景图片会不成比例的显示
        border: 1px solid #ccc;
            cursor: move;
        }
    </style>
</head>
<body>
<div id="big_div">
    <h1>阳光环球进销存管理系统</h1>
    <div id="div_form">
        <div id="left_div"></div>
        <div id="right_div">
            <form id="login_form" class="form">
                <h2>LOGIN</h2>
                <div class="inp_div">

                    <input class="account_inp" name="account" placeholder="请输入账号" maxlength="11">
                </div>
                <div class="inp_div">

                    <input type="password" class="account_inp" name="password" placeholder="请输入密码" maxlength="11">
                </div>
                <div id="box" onselectstart="return false;">
                    <div class="bgColor"></div>
                    <div class="txt">向右滑动完成验证</div>
                    <!--给i标签添加上相应字体图标的类名即可-->
                    <div class="slider"><i class="btn"></i></div>
                </div>
                <button type="button" id="login_btn">登录</button>

            </form>
        </div>
    </div>
</div>
<script src="style/jquery-3.3.1.js"></script>
<script>
    $("#login_btn").click(function(){
        $.ajax({
            type:"post",
            url:"LoginController/login",
            data:$("#login_form").serialize(),
            dataType:"json",
            success:function (json){
                if(json.message=="成功"){
                    location.href = "index.html";
                }else{
                    alert("账号或密码错误");
                }

            }
        });
        let txt = $(".txt").text();
        if(txt=="向右滑动完成验证"){
            location.href="Login.html";
        }

    });
//-----------------------------滑块验证-------------------------------------------------
    //一、定义了一个获取元素的方法
    function getEle(selector){
        return document.querySelector(selector);
    }
    //二、获取到需要用到的DOM元素
    var box = getEle("#box"),//容器
        bgColor = getEle(".bgColor"),//背景色
        txt = getEle(".txt"),//文本
        slider = getEle(".slider"),//滑块
        icon = getEle(".slider>i"),
        successMoveDistance = box.offsetWidth- slider.offsetWidth,//解锁需要滑动的距离
        downX,//用于存放鼠标按下时的位置
        isSuccess = false;//是否解锁成功的标志，默认不成功

    //三、给滑块添加鼠标按下事件
    slider.onmousedown = mousedownHandler;

    //3.1鼠标按下事件的方法实现
    function mousedownHandler(e){
        bgColor.style.transition = "";
        slider.style.transition = "";
        var e = e || window.event || e.which;
        downX = e.clientX;
        //在鼠标按下时，分别给鼠标添加移动和松开事件
        document.onmousemove = mousemoveHandler;
        document.onmouseup = mouseupHandler;
    };

    //四、定义一个获取鼠标当前需要移动多少距离的方法
    function getOffsetX(offset,min,max){
        if(offset < min){
            offset = min;
        }else if(offset > max){
            offset = max;
        }
        return offset;
    }

    //3.1.1鼠标移动事件的方法实现
    function mousemoveHandler(e){
        var e = e || window.event || e.which;
        var moveX = e.clientX;
        var offsetX = getOffsetX(moveX - downX,0,successMoveDistance);
        bgColor.style.width = offsetX + "px";
        slider.style.left = offsetX + "px";

        if(offsetX == successMoveDistance){
            success();
        }
        //如果不设置滑块滑动时会出现问题（目前还不知道为什么）
        e.preventDefault();
    };

    //3.1.2鼠标松开事件的方法实现
    function mouseupHandler(e){
        if(!isSuccess){
            bgColor.style.width = 0 + "px";
            slider.style.left = 0 + "px";
            bgColor.style.transition = "width 0.8s linear";
            slider.style.transition = "left 0.8s linear";
        }
        document.onmousemove = null;
        document.onmouseup = null;
    };

    //五、定义一个滑块解锁成功的方法
    function success(){
        isSuccess = true;
        txt.innerHTML = "验证成功";
        bgColor.style.backgroundColor ="#86cfda";
        slider.className = "slider active";
        icon.className = "btns";
        //滑动成功时，移除鼠标按下事件和鼠标移动事件
        slider.onmousedown = null;
        document.onmousemove = null;
    };





</script>
</body>
</html>